<template>
  <div style="width:100%;padding: 5px;">
    <!-- 将导航条写到前端展示项目中才有意义：因为文章和分类是多对对关系 -->
    <!-- <el-row>
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item><a href="/">活动管理</a></el-breadcrumb-item>
        <el-breadcrumb-item>活动列表</el-breadcrumb-item>
        <el-breadcrumb-item>活动详情</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row> -->
    <el-row>
        <h2 style="text-align: center;">{{article.aTitle}}</h2>
    </el-row>
    <el-row type="flex" justify="space-between" style="border-bottom: 3px dashed #eee;padding-bottom: 1em;">
        <el-col :span="20">
            <span style="padding-right: 1em;">作者：{{article.aAuthorName}}</span>|<span style="padding:0% 1em;">来源：{{article.aComeFrom}}</span>|<span style="padding-left: 1em;">发布时间：{{formartTimeString(article.aCreateTime)}}</span>
        </el-col>
        <el-col :span="2">
            <span style="text-align: right;width: 80%;display: block;"><i class="el-icon-view" style="padding-right: 1em;"></i>{{article.aVisitCount}}</span>
        </el-col>
    </el-row>
    <el-row style="padding: 1em 0%;">
        <el-col :span="24">
            <div v-html="article.aContent" class="markdown-body articleContent">
                <!-- {{article.aContent}} -->
            </div>
        </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
    props:["article"],
    methods:{
        formartTimeString(val){
            let re=val.slice(0,10);
            return re;
        }
    }
}
</script>
<style>
@import '../../assets/mavon-editor/dist/css/index.css';
.articleContent img{
    width: 80%;
    margin: 0% 10%;
}
</style>
<!-- <link rel="stylesheet" href="@/assets/mavon-editor/dist/css/index.css"> -->